<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<div class="content pb0">
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-aqua"><i class="fa fa-cog"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">使用率</span>
					<span class="info-box-number">90<small>%</small></span>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">关注数</span>
					<span class="info-box-number">41,410</span>
				</div>
			</div>
		</div>
		<div class="clearfix visible-sm-block"></div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-green"><i class="fa fa-internet-explorer"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">因特网</span>
					<span class="info-box-number">760</span>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>

				<div class="info-box-content">
					<span class="info-box-text">新用户</span>
					<span class="info-box-number">2,000</span>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">Spring Cloud</h3>
				</div>
				<div class="box-body">
					<table class="table table-bordered">
						<tr>
							<th class="text-center width-30">#</th>
							<th>网关代理模块调用</th>
							<th>模块之间互相调用</th>
						</tr>
						<tr>
							<td class="text-center">1</td>
							<td class="treeview"><a href="${ctx}/test1/testData/list" class="btn btn-default addTabPage">
								代理 test1 模块（单表）：${ctx}/test1/testData/list</a></td>
							<td class="treeview"><a href="${ctx}/test2/testData/list" class="btn btn-default addTabPage">
								test2 模块调用 test1 模块（单表）：${ctx}/test2/testData/list</a></td>
						</tr>
						<tr>
							<td class="text-center">2</td>
							<td class="treeview"><a href="${ctx}/test2/testTree/list" class="btn btn-default addTabPage">
								代理 test2 模块（树表）：${ctx}/test2/testTree/list</a></td>
							<td class="treeview"><a href="${ctx}/test1/testTree/list" class="btn btn-default addTabPage">
								test1 模块调用 test2 模块（树表）：${ctx}/test1/testTree/list</a></td>
						</tr>
						<tr>
							<td class="text-center">3</td>
							<td class="treeview" colspan="1">
								<a href="${ctx}/trans/test" id="btnTrunsTest" class="btn btn-default">
									分布式事务测试地址（Seata）</a>
								<script>
									$("#btnTrunsTest").click(function(){ 
										js.ajaxSubmit($(this).attr('href'), function(data){
											js.showMessage(data.message);
										});
										return false;
									});
								</script>
							</td>
							<td class="treeview" colspan="1">
								<a href="${ctx}/jeesite-cloud-module-test1/bpm/bpmClientTest" id="btnBpmTest" class="btn btn-default">
									业务流程测试地址</a>
								<script>
									$("#btnBpmTest").click(function(){ 
										js.ajaxSubmit($(this).attr('href'), function(data){
											js.showMessage(data.message);
										});
										return false;
									});
								</script>
								<a href="${ctx}/bpm/bpmTask/list" class="btn btn-default addTabPage ml5">
									业务流程任务管理</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">微服务地址</h3>
				</div>
				<div class="box-body">
					<table class="table table-bordered">
						<tr>
							<td class="text-center">1</td>
							<td class="treeview">
								<a href="http://127.0.0.1:8849/index.html#/login" class="btn btn-default" target="_blank">
									服务注册和配置中心：jeesite-cloud-nacos</a>
								&nbsp; or &nbsp;(&nbsp;
								<a href="http://127.0.0.1:8970" class="btn btn-default" target="_blank">
									服务注册：jeesite-cloud-eureka</a>
								&nbsp; and &nbsp;
								<a href="http://127.0.0.1:8971/project/default" class="btn btn-default" target="_blank">
									配置中心：jeesite-cloud-config</a> &nbsp;)
							</td>
						</tr>
						<tr>
							<td class="text-center">2</td>
							<td class="treeview">
								<a href="http://127.0.0.1:8980/js/a/login" class="btn btn-default" target="_blank">
									访问网关路由（系统入口）：jeesite-cloud-gateway</a>
								<a href="http://127.0.0.1:8981/js" class="btn btn-default" target="_blank">
									直接访问核心模块（统一授权认证）：jeesite-cloud-module-core</a>
							</td>
						</tr>
						<tr>
							<td class="text-center">2</td>
							<td class="treeview">
								<a href="http://127.0.0.1:8982/js" class="btn btn-default" target="_blank">
									直接访问模块1主项目：jeesite-cloud-module-test1</a>
								<a href="http://127.0.0.1:8983/js" class="btn btn-default" target="_blank">
									直接访问模块2主项目：jeesite-cloud-module-test2</a>
							</td>
						</tr>
						<tr>
							<td class="text-center">3</td>
							<td class="treeview">
								<a href="http://127.0.0.1:9311" class="btn btn-default" target="_blank">
									流量防卫兵：jeesite-cloud-module-sentinel</a>
								<a href="http://127.0.0.1:9411" class="btn btn-default" target="_blank">
									链路追踪：jeesite-cloud-zipkin</a>
								<a href="http://127.0.0.1:7091" class="btn btn-default" target="_blank">
									分布式事务：jeesite-cloud-module-seata</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">微服务系统监控</h3>
				</div>
				<div class="box-body">
					<table class="table table-bordered">
						<tr>
							<th class="text-center width-30">#</th>
							<th>core 模块</th>
							<th>test1 模块</th>
							<th>test2 模块</th>
						</tr>
						<tr>
							<td class="text-center">1</td>
							<td class="treeview">
								<a href="${ctx}/jeesite-cloud-module-core/state/server/index" class="btn btn-default addTabPage">
									服务器监控</a>
								<a href="${ctx}/jeesite-cloud-module-core/state/cache/index" class="btn btn-default addTabPage">
									缓存监控</a>
								<a href="${ctx}/jeesite-cloud-module-core/job/list" class="btn btn-default addTabPage">
									作业监控</a>
							</td>
							<td class="treeview">
								<a href="${ctx}/jeesite-cloud-module-test1/state/server/index" class="btn btn-default addTabPage">
									服务器监控</a>
								<a href="${ctx}/jeesite-cloud-module-test1/state/cache/index" class="btn btn-default addTabPage">
									缓存监控</a>
								<a href="${ctx}/jeesite-cloud-module-test1/job/list" class="btn btn-default addTabPage">
									作业监控</a>
							</td>
							<td class="treeview">
								<a href="${ctx}/jeesite-cloud-module-test2/state/server/index" class="btn btn-default addTabPage">
									服务器监控</a>
								<a href="${ctx}/jeesite-cloud-module-test2/state/cache/index" class="btn btn-default addTabPage">
									缓存监控</a>
								<a href="${ctx}/jeesite-cloud-module-test2/job/list" class="btn btn-default addTabPage">
									作业监控</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<section class="col-md-12 ui-sortable">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">月度报告</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<div class="btn-group">
							<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-wrench"></i></button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">导出Excel</a></li>
								<li><a href="#">导出Word</a></li>
								<li class="divider"></li>
								<li><a href="#">基本设置</a></li>
							</ul>
						</div>
						<button type="button" class="btn btn-box-tool" data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-md-8">
							<div class="chart">
								<div id="myChart" style="height:230px;width:100%"></div><script>
									$(function(){
										myChart1 = echarts.init(document.getElementById('myChart'), chartTheme);
										myChart1.setOption({
                                            backgroundColor:'',
										    title : {
										        text: js.formatDate(new Date(), 'yyyy-MM')
										    },
										    tooltip : {
										        trigger: 'axis'
										    },
										    legend: {
										        data:['意向','预购','成交']
										    },
										    toolbox: {
										        show : true,
										        feature : {
										            mark : {show: true},
										            dataView : {show: true, readOnly: false},
										            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
										            restore : {show: true},
										            saveAsImage : {show: true}
										        }
										    },
										    calculable : true,
										    grid : {
										    	top: '49',
										    	right: '20',
										    	bottom: '30'
										    },
										    xAxis : [
										        {
										            type : 'category',
										            boundaryGap : false,
										            data : ['周一','周二','周三','周四','周五','周六','周日']
										        }
										    ],
										    yAxis : [
										        {
										            type : 'value'
										        }
										    ],
										    color: [
										        '#5470c6','#ee6666','#73c0de','#3ba272','#9a60b4'
                                            ],
										    series : [
										        {
										            name:'成交',
										            type:'line',
										            smooth:true,
										            itemStyle: {normal: {areaStyle: {type: 'default'}}},
										            data:[10, 12, 21, 54, 260, 830, 710]
										        },
										        {
										            name:'预购',
										            type:'line',
										            smooth:true,
										            itemStyle: {normal: {areaStyle: {type: 'default'}}},
										            data:[30, 182, 434, 791, 390, 30, 10]
										        },
										        {
										            name:'意向',
										            type:'line',
										            smooth:true,
										            itemStyle: {normal: {areaStyle: {type: 'default'}}},
										            data:[1320, 1132, 601, 234, 120, 90, 20]
										        }
										     ]
										});
									});
								</script>
							</div>
						</div>
						<div class="col-md-4">
							<p class="text-center">
								<strong>完成目标</strong>
							</p>
							<div class="progress-group">
								<span class="progress-text">查询访问量</span>
								<span class="progress-number"><b>160</b>/200</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">产品访问量</span>
								<span class="progress-number"><b>310</b>/400</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-red" style="width: 77%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">完成购买率</span>
								<span class="progress-number"><b>480</b>/800</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-green" style="width: 60%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">将产品添加到购物车</span>
								<span class="progress-number"><b>100</b>/200</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-yellow" style="width: 50%"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="row">
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
								<h5 class="description-header">￥35,210.43</h5>
								<span class="description-text">总营收</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
								<h5 class="description-header">￥10,390.90</h5>
								<span class="description-text">总成本</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
								<h5 class="description-header">￥24,813.53</h5>
								<span class="description-text">总利润</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block">
								<span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
								<h5 class="description-header">1200</h5>
								<span class="description-text">目标完成</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>
<footer class="main-footer m0" style="padding-right:50px">
	<div class="pull-right hidden-xs">当前版本： ${@Global.getConfig('productVersion')}</div>
	&copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')} - Powered By
	<a href="http://jeesite.com" target="_blank">JeeSite</a>
</footer>
<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.13.2.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
var chartTheme = $('html').hasClass('skin-dark') > 0 ? 'dark' : 'light';
$(function(){
	$(window).resize(function(){
		var footerHeight = $('.main-footer').outerHeight() || 0;
		var windowHeight = $(window).height();
		$('.content').css('min-height', windowHeight - footerHeight);
		if(myChart1) myChart1.resize();
	}).resize();
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		$(window).resize();
	});
	$('.ui-sortable').sortable({
		connectWith : '.ui-sortable',
		handle      : '.box-header, .nav-tabs',
		placeholder : 'sort-highlight',
		forcePlaceholderSize: true,
		zIndex : 999999
	}).find('.box-header, .nav-tabs').css('cursor', 'move');
});
</script>